import React, { Component } from "react";
import {
  Link,
  Route,
  Switch,
  useHistory,
  useParams,
  useLocation,
  useRouteMatch,
} from "react-router-dom";

// hooks是react16.8以后才新增的内容
// hooks的目的是让函数组件能够拥有类组件的功能, hooks只能给函数组件用
// hooks还可以解决高阶组件让层级变深的问题
// 路由提供的hooks主要还是用于获取路由信息的
// 所有的hooks都是use开头的

// 所有的hooks都必须在函数组件的顶层调用

const Home = () => {
  const history = useHistory();
  const params = useParams();
  console.log(params);
  const location = useLocation();
  console.log(location);
  const match = useRouteMatch();
  console.log(match);

  const jump = () => {
    history.push("/about");
  };

  return (
    <div>
      这是home组件 - <button onClick={jump}>btn</button>
    </div>
  );
};

const About = () => {
  return <div>这是About组件</div>;
};

const Mine = () => {
  return <div>这是Mine组件</div>;
};

class App extends Component {
  render() {
    return (
      <>
        <h2>react-router-hooks</h2>
        <ul>
          <li>
            <Link to="/home">首页</Link>
          </li>
          <li>
            <Link to="/about">关于页</Link>
          </li>
          <li>
            <Link to="/mine">我的页</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          <Route path="/home">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/mine">
            <Mine />
          </Route>
        </Switch>
      </>
    );
  }
}

export default App;
